<template>
    <div>
       <!-- 搜索框 -->
  <van-search
    v-model="keyword"
    show-action
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @cancel="onCancel"
  />
       <!-- 下拉菜单和渲染 -->
      <DroGdown 
           v-if="filterCategory.length!=0"   
           :arr="filterCategory" 
           :newGoodlist="goodList"
           @self="zidingyi"
           @self1="zidingyi1"
       >  
      </DroGdown>
    </div>
</template>

<script>
import DroGdown from "@/components/Dorgdown.vue"
import { getsearchList} from "@/utils/https.js"
export default {
    data(){
        return {
            goodList:[],
            filterCategory:[],
            keyword:"",
            page:1,
            size:20,
            order:"desc",
            categoryId:0,
            sort:"id"
        }
    },
    components:{DroGdown},
    created(){
         this.getData()
    },
    methods:{
             //封装起来获取数据的函数
               
             getData(){
                    const obj={
                    keyword:this.keyword,
                     page:this.page,
                     size:this.size,
                     order:this.order,
                     categoryId:this.categoryId,
                     sort:this.sort
                        }
                getsearchList(obj).then((res)=>{
                    console.log(res)
                const data1= JSON.parse(JSON.stringify(res.data.filterCategory)
                                .replace(/name/g,"text")
                                .replace(/id/g,"value"))
                    this.filterCategory=data1
                    this.goodList=res.data.goodsList
          
                        })
                    
             },
            //输入框事件
            onSearch(val) {
                this.keyword=val;
                 this.getData()
            },
            //取消按钮的事件
            onCancel() {
                this.$router.push("/home") 
            },

            //自定义事件
            zidingyi(m){
                 this.order=m //升序或者降序的参数
                 this.sort="price"// 让后端根据价格排序
                 this.getData()
            },
            //自定义事件1
            zidingyi1(n){
                 this.categoryId=n //分类的参数
                 this.sort="id"//让后端默认跟着id排序
                  this.getData()
            }
    }
}
</script>

<style>

</style>